<template>
  <button @click="$router.go(-1)">返回</button>
  <button @click="$router.push('/navigation-after/aaa')">路由参数变化</button>

  <div>导航之后获取数据</div>

  <div style="margin: 20px;font-weight: bold">
    <div v-if="loading" style="color: grey">加载中...</div>
    <div v-else style="color: pink">获取数据成功</div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'NavigationAfter',
  data() {
    return {
      loading: true
    };
  },
  methods: {
    mockServerGetData() {
      this.loading = true;

      // setTimeout相当于向后端服务器获取数据的请求
      setTimeout(() => {
        this.loading = false;
      }, 3000);
    }
  },
  created() {
    // 向服务端发送获取数据请求
    // this.mockServerGetData();

    // 监听路由参数变化，立即向服务端发送获取数据请求
    this.$watch(
      () => this.$route.params,
      () => {
        this.mockServerGetData();
      },
      {immediate: true}
    );
  }
});
</script>

<style scoped>
button {
  margin-right: 10px;
  margin-bottom: 20px;
}
</style>